This PR will resolve #1098. You are welcomed to visit the issue to review the whole process of how the devtools developed.

Types

• 🎉 New Features

Background or solution

A global hook

Q: How opensumi/core and opensumi-devtools communicate with each other?
A: A global hook! That is the key.

Step 1. opensumi/core exposes a global hook window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__ = {} when ClientApp starts.

Step 2. opensumi-devtools tries to detect the existence of the hook, if the hook exists it will run.

Step 3. if users click "startCapture" button in the devtools, a few variables and functions will be injected to the hook by the API chrome.devtools.inspectedWindow.eval().

Step 4. when messages are received and sended in proxy.ts, opensumi/core will try to access to window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.capture, if accessible, it will call the injected global capture function and then put messages to window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.messages.

Step 5. opensumi-devtools get new messages from window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.messages every 1 second and set the message array to empty after getting all new messages.

Step 6. opensumi-devtools present the messages with a good UI.

Step 7. if users click "stopCapture" button, window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__ will be set to {} so no capture function can be accessed and opensumi/core will stop sharing its messages.

A contribution point

Q: As an extension, how opensumi-devtools get network latency from opensumi/core?
A: In the same way as how messages are captured.

Step 1. by leveraging opensumi's lifecycle contribution, I set an event listener window.addEventListener('devtools:latency', ()=>{...}) in initialize phase.

Step 2. if users click startCapture button, the custom event "devtools:latency" with "start" command will be dispatched. opensumi/core will start to test rtt after receiving the event and put the value to window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.latency.

Step 3. opensumi-devtools will get latency value from the hook and presents it in UI.

Changelog

a global hook and a contribution point for OpenSumi DevTools to communicate with.